<template>
	<div class="loginAndSignup hidePhoneLogin">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" left-arrow @click-left="onClickLeft">
			<template #title>
				<div class="logoBox"><img src="../../assets/images/logo.png"></div>
			</template>
		</van-nav-bar>
		<van-form @submit="onSubmit">
			<van-field class="regInput must" v-model="username"  placeholder="Nhập tài khoản"
				:rules="[{ required: true, message: 'Tên tài khoản không được để trống' }]" >
				<template #left-icon><i class="iconfont icon-icon_account"></i></template>
			</van-field>
			<van-field class="regInput must" v-model="password" type="password"  placeholder="6-15 ký tự chữ và số"
				:rules="[{ required: true, message: 'mật khẩu không thể để trống' }]" >
				<template #left-icon><i class="iconfont icon-icon_password"></i></template>
				<template #right-icon>
					<i class="iconfont icon-icon_show" @click="pwdToggle" v-if="ispwd"></i>
					<i class="iconfont icon-icon_hide" @click="pwdToggle" v-if="!ispwd"></i>
				</template>
			</van-field>
			<van-field class="regInput must" v-model="relpassword" type="password"  placeholder="Nhập lại mật khẩu"
				:rules="[{ required: true, message: 'mật khẩu Nhập lại mật khẩu' }]" >
				<template #left-icon><i class="iconfont icon-icon_password"></i></template>
				<template #right-icon>
					<i class="iconfont icon-icon_show" @click="pwdToggle" v-if="ispwd"></i>
					<i class="iconfont icon-icon_hide" @click="pwdToggle" v-if="!ispwd"></i>
				</template>
			</van-field>
			<van-field v-model="phone"  placeholder="Nhập số điện thoại"
				:rules="[{ required: true, message: 'Tên tài khoản không được để trống' }]" >
				<template #left-icon><i class="iconfont icon-icon_handphone"></i></template>
			</van-field>
			<van-field v-model="ncname"  placeholder="Nhập họ tên"
				:rules="[{ required: true, message: 'Tên tài khoản không được để trống' }]" >
				<template #left-icon><i class="iconfont icon-icon_personal_data"></i></template>
			</van-field>
			<div class="btns">
				<div class="terms-wp">
					<div class="wp-label">
						<van-checkbox v-model="labelchecked" shape="square">Tôi đã 18 tuổi, đã đọc và đồng ý quy tắc cá cược </van-checkbox>
						<span class="rule">Điều khoản</span>
					</div>
				</div>
				<van-button class="loginBtn" round block type="info" native-type="submit">Click để đăng ký</van-button>
				<div class="other">
					<div class="left"></div><div class="text">Khác</div><div class="right"></div>
				</div>
				<div class="otherBtn">
					<div>
						<i class="iconfont icon-icon_cs"></i>
						<span>Chăm sóc khách hàng</span>
					</div>
					<div>
						<i class="iconfont icon-icon_game_demo"></i>
						<span>Đăng nhập chơi thử</span>
					</div>
					<div>
						<i class="iconfont icon-icon_pc_login"></i>
						<span>Đăng nhập trên PC</span>
					</div>
				</div>
			</div>
		</van-form>
		
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				labelchecked:true,
				ispwd:false
			}
		},
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			pwdToggle(){
				this.ispwd = !this.ispwd
			}
		}
	}
</script>
<style>
</style>
